
<template>
  <div class="app-container calendar-list-container">
    <router-link :to="{ name: 'equipmentOrders_list', query: {} }">
      <el-button type="primary" style="margin: 10px">返回</el-button>
    </router-link>
    <el-tabs v-model="activeName" type="border-card" @tab-click="chooseTab">
      <el-tab-pane label="订单信息" name="1"></el-tab-pane>
      <el-tab-pane label="订单对应套餐信息" name="2"></el-tab-pane>
      <div class="one" v-if="this.activeName == 1">
        <div class="info tabBor">
          <div>昵称:{{ orderInfo.nickName }}</div>
          <div>手机号:{{ orderInfo.userPhone }}</div>
          <div>设备编号:{{ orderInfo.equipmentNumber }}</div>
          <div>端口编号:{{ orderInfo.mouthNo }}</div>
          <div>支付流水号:{{ orderInfo.outTradeNo }}</div>
          <div>订单类型:{{ orderInfo.orderType == 1 ? "按次" : "按时间" }}</div>
          <div>功率:{{ orderInfo.power }}/W</div>
          <div>
            时长:{{
              orderInfo.useTimeQuantum && orderInfo.orderType == 2
                ? getdTime(orderInfo.useTimeQuantum / 1000)
                : ""
            }}
          </div>
          <div>
            订单状态:{{
              orderInfo.payStatus == 1
                ? "待充电"
                : orderInfo.payStatus == 2
                ? "充电失败"
                : orderInfo.payStatus == 3
                ? "进行中"
                : orderInfo.payStatus == 4
                ? "待支付"
                : orderInfo.payStatus == 5
                ? "已支付"
                : orderInfo.payStatus == 6
                ? "不计费"
                : orderInfo.payStatus == 7
                ? "退款"
                : "-"
            }}
          </div>
          <div>支付总金额:{{ orderInfo.orderAmount / 100 + "元" }}</div>
          <div>支付实际金额:{{ orderInfo.actualAmount / 100 + "元" }}</div>
          <div>支付赠送金额:{{ orderInfo.givenAmount / 100 + "元" }}</div>

          <div>
            支付类型:{{
              orderInfo.payType == 1
                ? "微信"
                : orderInfo.payType == 2
                ? "支付宝"
                : orderInfo.payType == 3
                ? "余额"
                : orderInfo.payType == 4
                ? "会员卡"
                : "-"
            }}
          </div>

          <div>下单时间:{{ orderInfo.ctime }}</div>
          <div>结束时间:{{ orderInfo.etime }}</div>
          <div>
            结束原因:{{
              !(orderInfo.payStatus == 1 || orderInfo.payStatus == 3)
                ? orderInfo.endReason == 0
                  ? "正常结束"
                  : orderInfo.endReason == 1
                  ? "未使用结束"
                  : orderInfo.endReason == 2
                  ? "异常结束:电池充满"
                  : orderInfo.endReason == 3
                  ? "异常结束:限额充电"
                  : orderInfo.endReason == 4
                  ? "异常结束:电池识别异常"
                  : orderInfo.endReason == 5
                  ? "异常结束:输出短路故障"
                  : orderInfo.endReason == 6
                  ? "异常结束:输出过压"
                  : orderInfo.endReason == 7
                  ? "异常结束:输出过流"
                  : orderInfo.endReason == 8
                  ? "异常结束:系统过温"
                  : orderInfo.endReason == 9
                  ? "异常结束:NTC异常"
                  : orderInfo.endReason == 10
                  ? "异常结束:电池故障"
                  : orderInfo.endReason == 11
                  ? "异常结束:负载断电"
                  : orderInfo.endReason == 12
                  ? "异常结束:电源故障"
                  : orderInfo.endReason == 13
                  ? "异常结束:通讯超时"
                  : orderInfo.endReason == 14
                  ? "异常结束:过压关机"
                  : orderInfo.endReason == 15
                  ? "异常结束:电池反接"
                  : orderInfo.endReason == 16
                  ? "异常结束:充电超时"
                  : "人工结束"
                : "-"
            }}
          </div>

          <div v-if="orderInfo.payStatus == 7">
            退款总金额:{{
              (orderInfo.orderRefundAmount + orderInfo.orderRefundGivenAmount) /
                100 +
              "元"
            }}
          </div>
          <div v-if="orderInfo.payStatus == 7">
            退款实际金额:{{ orderInfo.orderRefundAmount / 100 + "元" }}
          </div>
          <div v-if="orderInfo.payStatus == 7">
            退款赠送金额:{{ orderInfo.orderRefundGivenAmount / 100 + "元" }}
          </div>
        </div>
      </div>
      <div class="two">
         <div class="info tabBor">
      <div>充电收费类型:{{orderMeal.chargeType==1?"按次收费":orderMeal.chargeType==2?"按时间段收费":"-"}}</div>

      <div v-if="orderMeal.chargeType==2">收费时间间隔:{{orderMeal.amountTime}}分钟 </div>

      <div v-if="orderMeal.chargeType==1">
      <div>单次收费价格:{{orderMeal.chargeAmount/100}}</div>
      </div>

       <div v-if="orderMeal.chargeType==2">
        <div>功率收费详情:</div>
       <el-row >
            <el-col :span="4" v-for="(orderInfo,index) in (orderMeal.chargePowerData)" :key="index">
              <div class="powerSize">
                <div class="powerSizeTop">
                  <span>功率范围:</span>
                  {{orderInfo.spower}}-{{orderInfo.epower}}W
                </div>
                <div>
                  <div>
                    <span>峰值收费:</span>
                    {{orderInfo.chargePeakAmount/100}}元
                  </div>
                  <div>
                    <span>低谷收费:</span>
                    {{orderInfo.chargeLowEbAmount/100}}元
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
     </div>



      <div>服务收费:{{orderMeal.serviceType==0?"不收费":orderMeal.serviceType==1?"按次收费":orderMeal.serviceType==2?"按时间段收费":"" }}</div>
       <div v-if="orderMeal.serviceType==1">
      <div>单次收费价格:{{(orderMeal.serviceAmount)/100}}元/分钟</div>
      </div>
      <div v-if="orderMeal.serviceType==2">
      <div>峰值时间段收费金额:{{(orderMeal.servicePeakAmount)/100}}元/分钟</div>
      <div>低谷时间段收费金额:{{(orderMeal.serviceLowEbAmount)/100}}元/分钟</div>
      </div>
      
       <div>保管收费类型:{{orderMeal.custodyType==0?"不收费":orderMeal.custodyType==1?"按次收费":orderMeal.custodyType==2?"按时间段收费":"" }}</div>
       <div v-if="orderMeal.custodyType==1">
      <div>单次收费价格:{{(orderMeal.custodyAmount)/100}}元/分钟</div>
      </div>
      <div v-if="orderMeal.custodyType==2">
      <div>峰值时间段收费金额:{{(orderMeal.custodyPeakAmount)/100}}元/分钟</div>
      <div>低谷时间段收费金额:{{(orderMeal.custodyLowEbAmount)/100}}元/分钟</div>
      </div>
      
       <div v-if="orderMeal.chargeType==2">
        <div>峰值时间:{{(orderMeal.peakStartTime).slice(11,16)}}-{{(orderMeal.peakEndTime).slice(11,16)}}</div>
      
      <div>低谷时间:{{(orderMeal.lowEbStartTime).slice(11,16)}}- {{(orderMeal.lowEbEndTime).slice(11,16)}} </div>
      </div>
      <div>单次最低收费:{{(orderMeal.lowAmount)/100}}元</div>
      <div>单次最高收费:{{(orderMeal.tallAmount)/100}}元</div>
      </div>
      </div>
      <!-- <el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i> 订单信息</span>
  </el-tab-pane>
  <el-tab-pane >
     <span slot="label"><i class="el-icon-document"></i> 订单对应套餐信息</span>
  </el-tab-pane> -->
    </el-tabs>
    <!--表格 -->

    <!-- pagination 分页 -->

    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import { getDetailsOrder } from "@/api/equipmentOrders";
import BackToTop from "@/components/BackToTop";
export default {
  components: {
    BackToTop,
  },
  data() {
    return {
      activeName: "1",
      loading: {
        list: false,
      },
      dialog: {
        view: false,
      },
      orderInfo: {},
      orderMeal: {},
      userList: null,
      agentList: null,
      orderId: this.$route.query.orderId,
      list: null,
    };
  },

  methods: {
    chooseTab(tab, event) {
      console.log(tab, event);
      console.log(this.activeName);
    },
    //获取时分秒 根据时间戳相减
    getdTime(startTime, endTime) {
      if (startTime > endTime) {
        return "0分钟";
      }
      let argsLen = arguments.length;
      if (argsLen == 2) {
        var val = endTime - startTime;
      } else {
        var val = startTime;
      }
      if (startTime.toString().length === 13) {
        val = val / 1000;
      }
      let d = Math.floor(val / 86400);
      val = val % 86400;
      let h = Math.floor(val / 3600);
      val = val % 3600;
      let m = Math.floor(val / 60);
      val = val % 60;

      let s = Math.floor(val);

      let str = "";
      if (d != 0) {
        str += d + "天";
      }
      if (h != 0) {
        str += h + "小时";
      }
      if (m != 0) {
        str += m + "分钟";
      }
      if (s != 0) {
        str += s + "秒";
      }

      if (d == 0 && h == 0 && m == 0 && s == 0) {
        str += 0 + "秒";
      }
      return str;
    },
    //获取列表
    async getList() {
      try {
        //调用服务器接口
        const { data } = await getDetailsOrder({ orderId: this.orderId });
        this.orderInfo = data;
        this.orderMeal = data.orderMeal;
        if (this.orderMeal.chargeType == 2) {
          this.orderMeal.peakStartTime = this.dateFormat(
            "yyyy-MM-dd HH:mm:ss",
            new Date(this.orderMeal.peakStartTime)
          );
          this.orderMeal.peakEndTime = this.dateFormat(
            "yyyy-MM-dd HH:mm:ss",
            new Date(this.orderMeal.peakEndTime)
          );
          this.orderMeal.lowEbStartTime = this.dateFormat(
            "yyyy-MM-dd HH:mm:ss",
            new Date(this.orderMeal.lowEbStartTime)
          );
          this.orderMeal.lowEbEndTime = this.dateFormat(
            "yyyy-MM-dd HH:mm:ss",
            new Date(this.orderMeal.lowEbEndTime)
          );
        }

        this.orderMeal.chargePowerData = JSON.parse(
          data.orderMeal.chargePowerData
        );
        this.agentList = data.agentList;
        this.userList = data.agentList;
        //  console.log( this.list)
      } catch (error) {}
    },
    //点击查找
    dateFormat(fmt, date) {
      if (!date) {
        return "";
      }
      let ret;
      const opt = {
        "y+": date.getFullYear().toString(), // 年
        "M+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "m+": date.getMinutes().toString(), // 分
        "s+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
    //点击查找
  },

  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-carousel__container {
  height: 500px !important;
}

.info {
  margin-top: 30px;
  padding-left: 50px;
  color: #606266;
  div {
    line-height: 50px;
  }
}
.powerSize {
  line-height: 2;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #dcdfe6;
  text-align: center;
}
.powerSizeSel {
  line-height: 2;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #4e9aff;
  text-align: center;
}
.powerSizeTop {
  border-bottom: 1px solid #dcdfe6;
}
.powerRates {
  padding: 10px;
  line-height: 2;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
.powerSizeInp {
  width: 50px;
  height: 50px;
  margin: 5px;
}
.powerSizeTitle {
  display: flex;
  flex-wrap: wrap;
}
</style>

